<template>
  <f7-page>
    <f7-navbar :title="$t('m.tcr1')" back-link=" "></f7-navbar>

    <div class="content-padding margin-t20 my-record">
      <div class="my-card" v-for="(item, index) in logs" :key="index">
        <p>{{$t('m.tcr2')}}：ZOL <span>{{$t('m.tcr3')}}：{{item.money}}</span></p>
        <p>{{$t('m.tcr4')}}：USDT <span>{{$t('m.tcr3')}}：{{item.old_money}}</span></p>
        <p>{{$t('m.tcr5')}}：{{item.cycle}} <span>倒计时：{{item.cycle - item.sf_day}}天</span></p>
        <p>{{$t('m.tcr6')}}：{{item.status | statusFilter}}</p>
        <p>{{$t('m.tcr7')}}：{{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm')}}</p>


        <template v-if="item.status === '0'"><!-- v-if="isRecall && item.status === '0'"-->
          <f7-button fill color="red" @click="openPwd(item.id, 1, 1)">{{$t('m.tcr8')}}</f7-button>
          <f7-button fill color="blue" :href="`/equity-swap2/?id=${item.id}&old_money=${item.old_money}&money=${item.money}`">权益置换</f7-button>
        </template>
        <template v-if="item.status === '1'">
          <f7-button fill color="blue"  @click="openPwd(item.id, 2, 1)">到期赎回</f7-button>
          <f7-button fill color="blue" @click="openPwd(item.id, undefined, 2)">合约续存</f7-button>
        </template>


      </div>
    </div>

    <van-dialog
      v-model="pwdModal"
      :title="$t('m.transactionPwdPlaceholder')"
      show-cancel-button
      slot="fixed"
      @confirm="handleCancel"
    >
      <div class="content-padding margin-t30">
        <custom-input type="password" :placeholder="$t('m.transactionPwdPlaceholder')" v-model="cancelFormItems.pwd"></custom-input>
      </div>
    </van-dialog>
  </f7-page>
</template>

<script>
  import {getProjectRecord, cancelProject, xuyue} from "../api/wealth";
  import i18n from "../i18n";

  export default {
    name: "token-contract-record",
    data() {
      return {
        logs: [],
        pwdModal: false,
        cancelFormItems: {
          pwd:'',
          project_id: '',
          pay_type: undefined
        },
        bindStatus: 1,
      }
    },
    computed: {
      isRecall() {
        return this.$f7route.query.type === 'recall';
      }
    },
    filters: {
      statusFilter(status) {
        switch (status) {
          case '0': return i18n.t('m.tcr9');
          case '1': return i18n.t('m.tcr10');
          case '2': return i18n.t('m.tcr11');
          case '3': return '完全置换';
          case '4': return '已续存';
        }
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getProjectRecord().then(res => {
          this.logs = res.data;
        })
      },
      openPwd(project_id, pay_type, status) {
        this.cancelFormItems.project_id = project_id;
        if(pay_type) this.cancelFormItems.pay_type = pay_type;
        this.bindStatus = status;
        this.pwdModal = true;
      },
      handleCancel() {
        if(this.bindStatus === 1) {
          cancelProject(this.cancelFormItems).then(() => {
            this.init();
            this.cancelFormItems.pwd = '';
            this.cancelFormItems.pay_type = undefined;
          })
        } else if(this.bindStatus === 2) {
          xuyue(this.cancelFormItems).then(() => {
            this.init();
            this.cancelFormItems.pwd = '';
          })
        }

      },
    }
  }
</script>

<style scoped lang="scss">
  .my-card {
    margin-bottom: $padding20;
  }
  .my-record {
    p {
      color: $color8b;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
    }
    .button {
      margin-top: $padding20;
    }
  }
</style>
